<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>AUI快速完成布局</title>
		<link rel="stylesheet" type="text/css" href="../../css/w3.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.2.0.css" />
		<style type="text/css">
			body {
				background: #ffffff;
			}
			.bg-dark {
				background: #333333 !important;
			}
			.aui-bar-btn-item {
				background: #ffffff;
				border: none;
				border-bottom: 2px solid #ffffff;
			}
			.aui-bar-btn-item.aui-active {
				color: #039be5;
				background: #ffffff;
				border-bottom: 2px solid #039be5;
			}
			.nomore-tag {
				margin: 0 auto;
				text-align: center;
				width: auto;
				color: #333;
				padding: 20px 10px 10px 10px;
				font-size: 15px;
			}
			.title-bar {
				margin: 0 auto;
				text-align: left;
				width: auto;
				color: #333;
				padding: 3px 3px 2px 15px;
				font-size: 15px;
			}
		</style>
	</head>
	<body>
		<section class="aui-content">
			<ul class="aui-list aui-collapse aui-border">
				<div class="aui-collapse-item">
					<div id="loan_content" class="aui-collapse-content" style="display:block;">
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:50%; margin-right: 1rem">
									信用卡账单(元)：
								</div>
								<div class="aui-list-item-input" style="width:50%;">
									<input id="creditcardPayText" type="text" placeholder="请在此输入数字" value="">
								</div>
							</div>
						</li>
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:50%; margin-right: 1rem">
									蚂蚁花呗账单(元)：
								</div>
								<div class="aui-list-item-input" style="width:50%;">
									<input id="huabeiPayText" type="text" placeholder="请在此输入数字" value="">
								</div>
							</div>
						</li>
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:50%; margin-right: 1rem">
									蚂蚁借呗账单(元)：
								</div>
								<div class="aui-list-item-input" style="width:50%;">
									<input id="jiebeiPayText" type="text" placeholder="请在此输入数字" value="">
								</div>
							</div>
						</li>
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:50%; margin-right: 1rem">
									京东白条账单(元)：
								</div>
								<div class="aui-list-item-input" style="width:50%;">
									<input id="jdPayText" type="text" placeholder="请在此输入数字" value="">
								</div>
							</div>
						</li>
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:50%; margin-right: 1rem">
									房租房贷支出(元)：
								</div>
								<div class="aui-list-item-input" style="width:50%;">
									<input id="housePayText" type="text" placeholder="请在此输入数字" value="">
								</div>
							</div>
						</li>
						<li class="aui-list-item">
							<div class="aui-list-item-inner">
								<div class="aui-list-item-label" style="width:50%; margin-right: 1rem">
									预计生活费(元)：
								</div>
								<div class="aui-list-item-input" style="width:50%;">
									<input id="lifePayText" type="text" placeholder="请在此输入数字" value="">
								</div>
							</div>
						</li>
						<li class="aui-list-item" style="display:block;">
							<div class="aui-list-item-inner">
								<div id="payYear" class="aui-list-item-label" style="width:30%; margin-right: 1rem">
									有效年份：
								</div>
								<div class="aui-list-item-input" style="width:30%; padding:0">
									<select id="selectYear" style="">
										<option value="" disabled selected>[请选择]</option>
										<option>2017</option>
										<option>2018</option>
										<option>2019</option>
										<option>2020</option>
										<option>2021</option>
										<option>2022</option>
									</select>
								</div>
								<div style="width:20%;  padding:0">
									年
								</div>
							</div>
						</li>
						<li class="aui-list-item" style="display:block">
							<div class="aui-list-item-inner">
								<div id="payMonth" class="aui-list-item-label" style="width:30%; margin-right: 1rem">
									有效月份：
								</div>
								<div class="aui-list-item-input" style="width:30%; padding:0">
									<select id="selectMonth" style="">
										<option value="" disabled selected>[请选择]</option>
										<option>1</option>
										<option>2</option>
										<option>3</option>
										<option>4</option>
										<option>5</option>
										<option>6</option>
										<option>7</option>
										<option>8</option>
										<option>9</option>
										<option>10</option>
										<option>11</option>
										<option>12</option>
									</select>
								</div>
								<div style="width:20%;  padding:0">
									月
								</div>
							</div>
						</li>
						<li id="saveBtn" class="aui-list-item">
							<div class="aui-list-item-inner aui-list-item-center aui-list-item-btn"  style="padding-top:0.5rem; padding-bottom:1rem">
								<div class="aui-btn aui-btn-warning aui-margin-r-10" style="width:4.0rem;" tapmode onclick="modifyRecord()">
									修改
								</div>
								<div class="aui-btn aui-btn-info" style="width:4.0rem;" tapmode onclick="saveRecord()">
									保存
								</div>
							</div>
						</li>
					</div>
				</div>
			</ul>
		</section>
	</body>
	<script type="text/javascript" src="../../script/api.js" ></script>
	<script type="text/javascript" src="../../script/aui-tab.js" ></script>
	<script>

		function disableEdit() {
			var list_items = document.querySelectorAll("li");
			var inputs = document.querySelectorAll("input[type=text]");
			var radioes = document.querySelectorAll("input[type=radio]");
			var checked = document.querySelectorAll("input:checked");
			var selects = document.querySelectorAll("select");
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].setAttribute('readOnly', 'true');
			}
			for (var i = 0; i < radioes.length; i++) {
				radioes[i].style.display = "none";
				radioes[i].parentNode.style.display = "none";
			}
			for (var i = 0; i < checked.length; i++) {
				checked[i].style.display = "inline-block";
				checked[i].setAttribute('disabled', 'disabled');
				checked[i].parentNode.style.display = "inline-block";
			}
			for (var i = 0; i < selects.length; i++) {
				selects[i].setAttribute('disabled', 'disabled');
			}
			for (var i = 0; i < list_items.length; i++) {
				if (list_items[i].id == "saveBtn") {
					break;
				}
				list_items[i].style.backgroundColor = "#f0f0f0";
			}
			//document.getElementById("select_agent").removeAttribute('disabled');
			//document.getElementById("select_agent").setAttribute('disabled', 'disabled');
		}

		function modifyRecord() {
			var list_items = document.querySelectorAll("li");
			var inputs = document.querySelectorAll("input[type=text]");
			var radioes = document.querySelectorAll("input[type=radio]");
			var checked = document.querySelectorAll("input:checked");
			var selects = document.querySelectorAll("select");
			for (var i = 0; i < inputs.length; i++) {
				inputs[i].removeAttribute('readOnly');
			}
			for (var i = 0; i < radioes.length; i++) {
				radioes[i].style.display = "inline-block";
				radioes[i].parentNode.style.display = "inline-block";
			}
			for (var i = 0; i < checked.length; i++) {
				checked[i].style.display = "inline-block";
				checked[i].removeAttribute('disabled');
				checked[i].parentNode.style.display = "inline-block";
			}
			for (var i = 0; i < selects.length; i++) {
				selects[i].removeAttribute('disabled');
			}
			for (var i = 0; i < list_items.length; i++) {
				if (list_items[i].id == "saveBtn") {
					break;
				}
				list_items[i].style.backgroundColor = "#fff";
			}
		}

		function saveRecord() {
			disableEdit();
		}
		

		apiready = function() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				api.refreshHeaderLoadDone();
			});
			api.parseTapmode();
		}
	</script>
</html>